<template>
  <div>

    <el-row>
      <el-col :span="15">
        <h3>一、单选框</h3>
        <div>
          <h4>1.1、分页</h4>
          <div class="block">
            <span class="demonstration">完整功能</span>
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage4" :page-sizes="[10, 20, 30, 40]" :page-size="100" layout="total, sizes, prev, pager, next, jumper" :total="count">
            </el-pagination>
          </div>

        </div>

      </el-col>

      <el-col :span="1">
        <div class="line"></div>
      </el-col>

      <el-col :span="8">
        <h3>二、多选框</h3>

      </el-col>
    </el-row>

  </div>
</template>

<script>
export default {
  data () {
    return {

      currentPage4: 1,
      count: 40,


    }
  },
  methods: {

    handleSizeChange (val) {
      console.log(val)
    },

    handleCurrentChange (val) {
      console.log(val)
    },



  }
}
</script>

<style scoped>
.line {
  height: 1000px;
  margin-left: 8px;
  border-left: 1px solid black;
}
</style>